<template>
  <div>
    <Row>
      <i-col span="24">
        <div>
          <Card>
            <p slot="title">
              <Icon type="stats-bars"></Icon>
              角色列表
            </p>
            <a href="javascript:void(0)" slot="extra">
              <Button type="primary" size="small" @click="showNewRoleModal">
                <Icon type="md-add"></Icon>&nbsp;新建角色
              </Button>
            </a>
            <div>
              <Table size="small" :highlight-row="true" :data="roleList"
                     :columns="tableColumns"></Table>
            </div>
          </Card>
        </div>
      </i-col>
    </Row>
    <!--新增角色信息-->
    <Modal
      v-model="showNewRole"
      title="创建新角色"
      @on-ok="createRole"
      ok-text="保存"
      @on-cancel="showNewRole = false">
      <Form :model="newRoleInfo" label-position="top">
        <FormItem label="角色名称">
          <Input v-model="newRoleInfo.name" placeholder="请输入合法的角色名称..."></Input>
        </FormItem>
        <FormItem label="角色描述">
          <Input v-model="newRoleInfo.note" type="textarea" :autosize="{minRows: 5,maxRows: 10}"
                 placeholder="请填写角色相关描述信息..."></Input>
        </FormItem>
      </Form>
    </Modal>
    <!--菜单权限编辑-->
    <Modal
      width="768"
      v-model="showMenuRoot"
      title="菜单权限编辑"
      @on-ok="saveMenuRoot"
      ok-text="保存"
      @on-cancel="showMenuRoot = false">
      <roleMenusManage @getCurrentRoleRoot="getCurrentRoleRoot" :data="hasRoot"></roleMenusManage>
    </Modal>
    <!--角色授予选择列表-->
  </div>
</template>
<script>
  import roleMenusManage from './component/roleMenusManage/roleMenusManage.vue';
  import originMenus from './component/treeData.js';
  import util from 'util'

  export default {
    components: {
      roleMenusManage
    },
    data() {
      return {
        transferModal: false,
        data: [],
        targetKeys: [],
        activeTab: "0",
        conferTab: false,
        hasRoot: [],
        sysRoot: [],
        currentRoleMenuIndex: null,
        currentRoleMenuDetails: null,
        currentRole: null,
        showNewRole: false,
        showMenuRoot: false,
        showAppRoot: false,
        showStaffConfer: false,
        rolesContainer: [],
        newRoleInfo: {
          name: "",
          note: ""
        },
        roleList: [],
        tableColumns: [
          {
            title: "角色名称",
            key: "roleName"
          },
          {
            title: "相关描述",
            key: "note",
            render: (h,params) =>{
              return h('span',params.row.note || '暂无备注')
            }
          },
          {
            title: "操作",
            key: "action",
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    "margin-right": "10px"
                  },
                  on: {
                    click: () => {
                      this.editMenuRoot(params.row);
                    }
                  }
                }, '菜单编辑'),
                h('Button', {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  style: {
                    "margin-right": "10px"
                  },
                  on: {
                    click: () => {
                      this.deleteRole(params.row)
                    }
                  }
                }, '删除')
              ])
            }
          }
        ]
      }
    },
    methods: {
//      请求阶段
      getRoleList() {
        this.$api.getRoleList().then(res =>{
          if(res.code === 200){
            this.roleList = res.data.roleList;
          }
        })
      },
//      唤起新建角色modal
      showNewRoleModal() {
        this.showNewRole = true
      },
//      新建角色保存
      createRole() {
        let obj = {
          roleName: this.newRoleInfo.name,
          note: this.newRoleInfo.note
        };
        this.$api.addRole(obj).then(res =>{
          if (res.code === 200) {
            this.showNewRole = false;
            this.getRoleList();
            this.$Notice.success({
              title:'角色添加成功！'
            })
          } else {
            this.$Notice.warning({
              title: '添加角色信息失败',
            });
          }
        })
      },
//      获取当前角色权限菜单集合
      getCurrentRoleRoot(codes, menus) {
        this.currentRoleMenuIndex = codes;
        this.currentRoleMenuDetails = menus;
      },
//      获取个人权限并编辑权限菜单
      editMenuRoot(row) {
        this.currentRole = row;
        let roots = row.roleValue || [];
        let origin = util.cloneObj(originMenus);
        let len = origin.length;
        let rootLen = roots.length;
        for (let i = 0; i < len; i++) {
          if (origin[i].children) {
            let childLen = origin[i].children.length;
            for (let k = 0; k < childLen; k++) {
              for (let s = 0; s < rootLen; s++) {
                if (origin[i].children[k].title === roots[s].menuName) {
                  origin[i].children[k].checked = true
                }
              }
            }
          } else {
            for (let s = 0; s < rootLen; s++) {
              if (origin[i].title === roots[s].menuName) {
                origin[i].checked = true
              }
            }
          }
        }
        this.hasRoot = origin;
        let menus = [];
        roots.forEach((menu) => {
          menus.push({
            menuName: menu.menuName
          })
        });
        this.currentRoleMenuDetails = menus;
        this.showMenuRoot = true;
      },
//      保存菜单权限
      saveMenuRoot() {
        let obj = {
          roleId: this.currentRole.roleId,
          roleValue: this.currentRoleMenuDetails
        };
        this.$api.updateRole(obj).then(res =>{
          if (res.code === 200) {
            this.showMenuRoot = false;
            this.getRoleList();
          } else {
            this.$Notice.warning({
              title: data.data
            })
          }
        })
      },
//      删除角色
      deleteRole(row) {
        this.$api.delRole({
          roleId: row.roleId
        }).then(res =>{
          if (res.code === 200) {
            this.$Notice.success({
              title: '已成功删除' + row.roleName
            });
            this.getRoleList()
          } else {
            this.$Notice.warning({
              title: res.data.msg
            })
          }
        })
      },
      render(item) {
        return item.label;
      }
    },
    mounted() {
      this.getRoleList()
    }
  }
</script>
